<template>
  <div>
    <div class="header-cls">  
      <el-tooltip effect="dark" :content="faultDescTitle || description" placement="bottom">
        <div class="content-left">{{ faultDescTitle || description }}</div>
      </el-tooltip>

      <div class="content-right">
        <el-button v-if="hasFaultEdit" type="plain-third" @click="edit">{{ $t('common.base.edit') }}</el-button>
        <base-button v-if="hasFaultDelete" type="danger" @event="deleteHandle" style="margin-left:8px;">{{ $t('common.base.delete') }}</base-button>
      </div>
    </div>

    <!-- 故障对象弹框 -->
    <faultObj 
      v-model="faultObjDialogVisible"
      :current-fault-obj-id='currentId'
      @operateSuc="operateSuc"
    />

    <!-- 故障描述弹框 -->
    <faultDescription 
      v-model="faultDescriptionDialogVisible" 
      :current-fault-description-id="currentId"
      @operateSuc="operateSuc"
    />

    <!-- 解决方案弹框 -->
    <FaultSolution 
      v-model="faultSolutionDialogVisible" 
      :current-fault-solution-id="currentId"
      @operateSuc="operateSuc"
    />
  </div>
</template>
      
<script>
import platform from '@src/platform';

import { libraryDelete, solutionDelete } from '@src/api/Fault';

// 故障对象弹框
import FaultObj from '@src/modules/faultLibrary/components/FaultInformationDialog/FaultObj';
// 故障描述弹框
import FaultDescription from '@src/modules/faultLibrary/components/FaultInformationDialog/FaultDescription';
// 解决方案弹框
import FaultSolution from '@src/modules/faultLibrary/components/FaultInformationDialog/FaultSolution';

import { openAccurateTab } from '@src/util/platform';

import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import AuthUtil from '@src/util/auth';
import { reloadTab } from '@src/modules/projectManage/productTypeUtils/jumpPage.js';

export default{
  // 故障详情页面的header部分
  name:'HeaderCom',
  data(){
    return {
      // 新建/编辑故障对象弹框
      faultObjDialogVisible:false,
      // 新建/编辑故障描述弹框
      faultDescriptionDialogVisible:false,
      // 新建/编辑解决方案弹框
      faultSolutionDialogVisible:false,
    }
  },

  props:{
    description:{
      type: String
    },
    faultDescTitle:{
      type: String
    },
    query:{
      type:Object
    },
    initData: {
      type: Object,
      default: () => ({})
    },
  },

  computed:{
    // 当前编辑的故障对象/故障描述/解决方案的id
    currentId(){
      return this.query.id
    },
    auth() {
      return this.initData?.auths || {};
    },
    hasFaultEdit() {
      return AuthUtil.hasAuth(this.auth, 'FAULT_LIBRARY_EDIT')
    },
    hasFaultDelete() {
      return AuthUtil.hasAuth(this.auth, 'FAULT_LIBRARY_DELETE')
    },
  },
  components:{
    // 新建/编辑故障对象
    FaultObj,
    // 新建/编辑故障描述
    FaultDescription,
    // 新建/编辑解决方案
    FaultSolution
  },
  

  methods: {
    deleteHandle(){
      this.$confirm(this.$t('common.paas.view.designer.workFlow.tip1'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning'
      }).then(async () => {
        let res = {}
        const { type, id } = this.query || {}
        if(type === 'solution'){
          // 当前是解决方案
          res = await solutionDelete({solutionId:id})
        }else{
          // 删除故障对象
          res = await libraryDelete({faultId:id})
        }

        if(res.status === 0){
          reloadTab();
          let fromId = window.frameElement.getAttribute('id');
          openAccurateTab({
            type: PageRoutesTypeEnum.PageFaultLibraryList,
            closeNowPage: true,
            fromId,
          })
        }
      })
    },

    // 编辑成功的回调
    operateSuc(){
      this.$emit('getData')
    },

    edit(){
      const { type} = this.query || {}
      switch(type){
        case 'obj': 
          this.faultObjDialogVisible = true;
          break;
        case 'description':
          this.faultDescriptionDialogVisible = true;
          break;
        case 'solution':
          this.faultSolutionDialogVisible = true;
          break;
        default: break;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.header-cls{
	background:#fff;
	padding:12px 16px;
	display:flex;
	justify-content:space-between;  
  align-items: center;

  .content-left{
    flex: 1;
    @include text-ellipsis(); 
    margin-right: 10px;
  }
	.content-right{
		display: flex;
	}
}
</style>